Field
The invention relates generally to a method and system of defining and tracking an interactive user interface.
Description of Related Art
Interactive applications generally have a user interface comprised of interactive elements, such as buttons. The interactive elements often have multiple states that occur in response to various user actions. The interactive applications are generally constructed using a cut and paste technique.
Interactive applications are generally constructed by a method known as “cutting and placing.” First, graphics creation and editing software, such as Adobe Photoshop®, is used to author the overall appearance and layout of the interface. Graphics for each state of each individual interactive element are created, usually by defining and cutting the element from an overall layout, and then saving as an individual file. For a two state element, such as a button, it is typically displayed in a normal state, but then displayed in a rollover state in response to mouse location. The author manually creates and saves at least one image for the rollover state of the button and a background image containing the normal image of the button at the correct geometric position. This method requires the cutting and placing of a large number of graphic files when the interactive interface is complex, such as when multiple interactive elements are desired. In certain instances, for an interface containing multiple elements having multiple states, the number of images “I” requiring creation would be at least I=(E×(S−1))+1, where “E” is the number of interactive elements in the interface and “S” is the number of states (assuming all elements have the same number of states). Other instances require that a graphic be created for each state of each of the individual interactive elements. In these other instances, the number of graphics an author must create and manage increases to I=(E×S)+1.
The second step of the construction process requires placement of the created images at their proper geometric position within the interface. To create the final interface, the author would usually need a second software application, such as Adobe® Flash®. Using these tools, the author can place an individual image for each state of each interactive element against a background graphic, trying to place the respective state image of the interactive element back in the exact, original location of the element within the overall layout. When individual graphic files are created and saved for each element at the cutting stage, the files only retain their size information, but not their positional information in relation to the overall interface from which the element was cut. Because of the lack of inherent positional information in the files, the author must manually line up each of the completed, individual pieces of graphics to achieve the intended look, oftentimes through multiple rounds of painstaking trial and error.
Finally, the graphic for each state of each interactive element must be assembled, and functionality defined, so that a pre-determined function is assigned to each state of each element in response to user input. Depending on the output platform, the defining can occur during reassembly of the element layers in the overall interface, or as a separate step. The entire process can be time-consuming and prone to error. If the author later decides to change an image for one or more states of one or more elements, or decides to add a state, the entire process of “cutting and placing,” and defining and reassembly of the respective elements must be performed again. Accordingly, there is a need for systems and methods to remedy the deficiencies as described above.